<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h4>{{msg}}</h4>
    <h4>{{msg2}}</h4>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello',
            msg2: ''
        },
        //computed属性中定义计算属性
        //计算属性是一个带有返回值的方法
        //使用计算属性时，像使用data中的变量一样
        //计算属性是基于他们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时他才会重新求值
        //即： 只有msg不发生改变，reserveMessage就不会重新求值。
        computed: {
            reserveMessage() {
                return this.msg.split('').reverse().join('')
            }
        },
        methods: {
            //方法没有缓存
            test (){
                this.msg2 = this.msg.split('').reverse().join('')
            }
        },
        mounted() {
            this.test()
        }
    })
</script>
</body>
</html>
